import React from "react";
import {Affix,Layout, Input,Tabs ,Col,Row } from 'antd';
import '../css/home.scss';
import DomList from "../components/list/domList";
import MyHeadShot from "../components/HeahShot/myHeadShot";


const { Header, Content, Footer } = Layout;
const { TabPane } = Tabs;
const { Search } = Input;
export default class home extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            current:'1',
            headBadge: 0
        }
    }

    handleClick = e => {
        console.log('click ', e);
        this.setState({ current: e.key });
    };

    render() {
        return(
            <>
                <Layout>
                    <Header  style={{ position: 'fixed', zIndex: 1, width: '100%' ,background: 'white',height: '45px'}}>
                        <Row justify="center" align="middle">
                            <Col  span={8} style={{paddingRight:'5%'}}>
                                <Tabs defaultActiveKey="1" centered>
                                    <TabPane tab="Tab 1" key="1" />
                                    <TabPane tab="Tab 2" key="2" />
                                    <TabPane tab="Tab 3" key="3" />
                                </Tabs>
                            </Col>
                            <Col span={6} style={{paddingBottom: '1%'}}>
                                <Search
                                    placeholder="search"
                                    onSearch={value => console.log(value)}
                                    style={{ width: 200 }}
                                />
                            </Col>
                            <Col  span={4} align="center" style={{paddingBottom: '1%', paddingLeft:'4%'}}>
                                <MyHeadShot HeadBadge={this.props.headBadge}/>
                            </Col>
                        </Row>
                    </Header>
                    <Row style={{marginTop: '8vh'}}>
                        <Col span={10} style={{marginLeft:'44vh'}}>
                           <DomList/>
                        </Col>
                        <Col span={4} style={{marginLeft:'1vh'}}>
                            <Content className="site-layout">
                                <Affix offsetTop={53}>
                                    <div className="site-layout-background" style={{height:'300px'}}>
                                        <h1>12312</h1>
                                        <h1>12312</h1>
                                        <h1>12312</h1>
                                        <h1>12312</h1>
                                        <h1>12312</h1>
                                        <h1>12312</h1>
                                    </div>
                                </Affix>
                            </Content>
                        </Col>
                    </Row>
                    <Footer style={{ textAlign: 'center' }}>Blog Design ©2020 Created by DC </Footer>
                </Layout>
            </>
        )
    }
}